 <template>
    <div>
        <pagination
            :length="totalNum"
            :pagination="pagination"
            @currpage="getShipmentByParam"
            float="right"
        ></pagination>
        <el-table
            ref="table"
            :data="tableData"
            :header-cell-style="getRowClass"
            :row-class-name="tableRowClassName"
            v-loading="loading"
            border
            style="width: 100%"
        >
            <el-table-column prop="brandName" :label="$t('m.label.account')" width="100px"></el-table-column>
            <el-table-column prop="countryName" :label="$t('m.label.country')" width="80px"></el-table-column>
            <el-table-column :label="$t('m.label.shipmentName')">
                <template slot-scope="scope">
                    <div
                        @click="findItemByShipmentId(scope.row)"
                        class="shipmentTitle"
                    >{{ scope.row.shipingName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="shipmentId" width="170" :label="$t('m.label.shipmentNumber')"></el-table-column>
            <el-table-column prop="ctime" :label="$t('m.label.creationTime')" width="100px">
                <template slot-scope="scope">
                    {{
                    scope.row.ctime.slice(0, 10)
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="amzShipmentStatus" :label="$t('m.label.Status')" width="120px"></el-table-column>
            <el-table-column prop="asin" v-if="!perUnit" :label="$t('m.label.ASIN')" width="150px"></el-table-column>
            <el-table-column
                prop="sellerSku"
                v-if="!perUnit"
                :label="$t('m.label.SKU')"
                width="150px"
            ></el-table-column>
            <el-table-column prop="totalQuantity" :label="$t('m.label.shipQuantity')" width="90px"></el-table-column>
            <el-table-column
                prop="receivedQuantity"
                :label="$t('m.label.receivedQuantity')"
                width="100px"
            ></el-table-column>
            <el-table-column
                prop="notArriveQuantity"
                :label="$t('m.label.notArriveQuantity')"
                width="100px"
            >
                <template slot-scope="scope">
                    <span
                        :style="
                            scope.row.notArriveQuantity > 0 ? 'color: red;' : ''
                        "
                    >{{ scope.row.notArriveQuantity }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="trackingId" :label="$t('m.label.ShipmentNumber')" width="170px"></el-table-column>
            <el-table-column prop="trackingProcess" :label="$t('m.label.trackingProcess')"></el-table-column>
        </el-table>
        <pagination
            :length="totalNum"
            :pagination="pagination"
            @currpage="getShipmentByParam"
            float="right"
        ></pagination>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog :title="$t('m.label.shipmentList')" :visible.sync="dialogTableVisible">
            <el-table border :row-class-name="tableRowClassName" :data="findItemByShipment">
                <el-table-column property="sellerSku" :label="$t('m.label.SKU')"></el-table-column>
                <el-table-column property="quantityShipped" :label="$t('m.label.quantityShipped')"></el-table-column>
                <el-table-column
                    property="quantityReceived"
                    :label="$t('m.label.receivedQuantity')"
                ></el-table-column>
                <el-table-column
                    property="quantityNotArrived"
                    :label="$t('m.label.notArriveQuantity')"
                ></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
const ERR_OK = 200;
import pagination from "components/pagination/pagination.vue";
import scrollTable from "components/scroll/scroll-table.vue";
export default {
    props: ["formData"],
    data() {
        return {
            dialogTableVisible: false,
            item: {},
            tableData: [],
            loading: true,
            perUnit: true,
            findItemByShipment: [],
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            totalNum: 0
        };
    },
    created() {
        this.getShipmentByParam();
    },
    mounted() {
        this.$refs.scrollTable.scrollShow(this.$refs.table);
    },
    methods: {
        // 获取表格数据
        getShipmentByParam() {
            this.loading = true;
            this.tableData = [];
            this.formData.pageSize = this.pagination.pagesize;
            this.formData.startNum = this.pagination.currpage;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.orderAndOverseaService +
                    "/queryShipmentMsg/getShipmentByParam",
                data: this.formData
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    let data = res.data.data;
                    this.tableData = data.sort(
                        (a, b) =>
                            new Date(b.ctime).getTime() -
                            new Date(a.ctime).getTime()
                    );
                    this.totalNum = res.data.totalNum;
                }
                this.loading = false;
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (row.isAlarm) {
                return "warning-row";
            }
            return "";
        },
        // 查看列表详情
        findItemByShipmentId(item) {
            this.dialogTableVisible = true;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.orderAndOverseaService +
                    "/queryShipmentMsg/findItemByShipmentId",
                data: {
                    amzShipmentStatus: item.amzShipmentStatus,
                    sellerId: item.sellerId,
                    shipmentId: item.shipmentId
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.findItemByShipment = res.data.data;
                }
            });
        }
    },
    watch: {
        formData() {
            this.pagination.currpage = 1;
            this.totalNum = 0;
            this.getShipmentByParam();
        }
    },
    components: {
        pagination,
        scrollTable
    }
};
</script>
<style lang="stylus" scoped>
.shipmentTitle {
    cursor: pointer;
    color: #409EFF;
    text-decoration: underline;
}
</style>
<style>
.el-table .warning-row {
    background: #fef0f0;
}
</style>